<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!--
	
	 CSS3 Card Games Example
	 http://gamedesign.cc/html5games/css3-matching-game/
	 
	 This is an example game for my coming book.
	 
	 Copyright 2011, Thomas Seng Hin Mak
	 makzan@gmail.com
	   
	 All Right Reserved.
	 
	-->
	
	<meta charset=utf-8>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>
	<title>狮若记忆消消乐</title>
	<link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
	<link href="http://fonts.googleapis.com/css?family=Orbitron:400,700" rel="stylesheet" type="text/css" >
	<link rel="stylesheet" href="css/matchingGame/matchgame.css" />
</head>
<style>
	@media screen and (orientation: portrait) {
        html{
            width : 100vmin;
            height : 100vmax;
        }
        body{
            width : 100vmin;
            height : 100vmax;
        }
        .wrapper{
            width : 100%;
        }
		#game{
			width: 90%;
		}
		#popup-box{
            width : 100%;
		}
    }
	@media screen and (orientation: landscape) {
        html{
            width : 100vmax;
            height : 100vmin;
        }
        body{
            width : 100vmax;
            height : 100vmin;
        }
        .wrapper{
            width : 100vmax;
            height : 100vmin;
        }
    }
</style>
<body>
	<div class="wrapper">
		<header>
			<h1>狮若记忆消消乐</h1>
		</header>
		
		<div id="timer">
			已消耗时间: <span id="elapsed-time">00:00</span>
		</div>
		<section id="game">		
			<div id="cards">			
				<div class="card">
					<div class="face front"></div>
					<div class="face back"></div>
				</div> <!-- .card -->						
			</div> <!-- #cards -->
		</section> <!-- #game -->
		
		<section id="popup" class="hide">
			<div id="popup-bg">
			</div>
			<div id="popup-box">
				<div class="ribbon hide">				
					<div class="ribbon-body">
						<span>新纪录</span>
					</div>			
					<div class="triangle"></div>	
				</div>		
				<div id="popup-box-content">
					<P><small>恭喜获得称号：</small><span class="fans-title">狮若新秀粉</span></P>
					<p>你的成绩:</p>
					<p><span class='score'>13</span></p>
					<p><small>上一次成绩: </small><span class='last-score'>20</span><br>
					<a href="./matchingGame.html">再来一次</a>
					<a href="./index.html#nav-games">返回主页</a>
				</div>
			</div>
		</section>
	</div>

<script src="js/matchingGame/jquery-1.6.min.js"></script>
<script src="js/matchingGame/html5games.matchgame.js"></script>
</body>
</html>